<template>
  <div id="health">
    <div class="topimg"></div>
    <div class="container">
      <el-row :gutter="10">
        <div class="top1">
          <el-col :span="24" class="hidden-md-and-down">
            <div class="grid-content bg-purple">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部文章" name="first"></el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
          <el-col class="hidden-lg-and-up">
            <div class="grid-content bg-purple">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <!-- <el-tab-pane label="全部文章" name="first"></el-tab-pane>
                <el-tab-pane label="饮食新闻" name="second"></el-tab-pane>
                <el-tab-pane label="健康常识" name="third"></el-tab-pane>
                <el-tab-pane label="药膳养生" name="fourth"></el-tab-pane>
                <el-tab-pane label="人群膳食" name="fifth"></el-tab-pane>-->
                <el-tab-pane
                  v-for="(value,index) in products"
                  :key="index"
                  :label="value.name"
                  :name="value.list"
                  v-on:click.native="torouter(index)"
                ></el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
        </div>
      </el-row>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
          <div class="grid-content bg-purple">
            <section class="left1">
                <router-view></router-view>
            </section>
          </div>
        </el-col>
        <el-col :lg="8" :xl="8" class="hidden-md-and-down">
          <div class="grid-content bg-purple">
            <section class="right1">
              <h3>主题站</h3>
              <ul id="topic">
                <router-link tag="li" :to="{name:'healthList',params:{id:1}}">
                  <a class="img_a">
                    <img
                      src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598008041046&di=f91ff5113561a2eb672dafb29b6a1a79&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F17%2F04%2F08%2F8eea68253d2f4025683944de52db1e0c.jpg"
                      alt
                    />
                  </a>
                  <div>
                    <a>饮食新闻</a>
                    <br />
                    <p>查阅饮食最新报道</p>
                  </div>
                </router-link>
                <router-link tag="li" :to="{name:'healthList',params:{id:2}}">
                  <a>
                    <img
                      src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2334375748,298499436&fm=26&gp=0.jpg"
                      alt
                    />
                  </a>
                  <div>
                    <a>健康常识</a>
                    <p>分享饮食方面的小知识</p>
                  </div>
                </router-link>
                <router-link tag="li" :to="{name:'healthList',params:{id:3}}">
                  <a>
                    <img
                      src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597747988478&di=7cf29533f1360b173856fb9667863579&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F18%2F03%2F18%2F6c9914b94a2112b628903aa7f143f45e.jpg%2521%2Ffwfh%2F804x920%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue"
                      alt
                    />
                  </a>
                  <div>
                    <a>药膳养生</a>
                    <p>药材与食材相配的美食</p>
                  </div>
                </router-link>
                <router-link tag="li" :to="{name:'healthList',params:{id:4}}">
                  <a>
                    <img src="https://cp1.douguo.com/upload/post/1357362330.png" alt />
                  </a>
                  <div>
                    <a>人群膳食</a>
                    <p>针对不同人群</p>
                  </div>
                </router-link>
              </ul>
              <div class="welcome">
                <h3>欢迎来稿</h3>
                <p>
                  食界提供了一个温暖的平台，如果你是个资深吃货，爱好写作，并且乐于分享，那么我们找的就是你啦！
                  <br />
                  <br />投稿要求：原创文章，语言流畅，思路清晰，主题与“美食”相关，文章至少2000字，图片精美。
                  <br />
                  <br />投稿邮箱：shijie@chixing.com 我们期待您的来稿（来稿请注明您的ID）。
                </p>
              </div>
            </section>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
export default {
  name: "health",
  data() {
    return {
      activeName: "0",
      products: [
        { name: "全部文章", list: "0" },
        { name: "饮食新闻", list: "1" },
        { name: "健康常识", list: "2" },
        { name: "药膳养生", list: "3" },
        { name: "人群膳食", list: "4" }
      ]
    };
  },
  methods: {
    // 导航筛选
    handleClick(tab, event) {
      console.log(tab, event);
      let t = event.target.getAttribute("id").replace(/[^0-9]/gi, "");
      this.$router.push({ name: "healthList", params: { id: t } });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>
<style lang="css" scoped>
@import "../css/heath.css";
</style>
